<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Hot Topic @ Twitter</title>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap-3.3.5/datetime/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <!-- Custom styles for this template -->
    <link href="../css/custom.css" rel="stylesheet">
    
  </head>
  <body>
    <nav class="navbar navbar-inverse" style="margin-bottom:0">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">Hot Topic @Twitter</a>
       </div>
       <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Hot Topic</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sample 
                <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Sample Analysis</li>
                <li><a href="degree.html">Degree Distribution</a></li>
                <li><a href="like.html">Twitter Like</a></li>
                <li><a href="follow.html">Follow Who</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    
    
    <br/>
	<div class="container" style="padding: 10px 15px 0;">
	    <form action="" class="form-horizontal"  role="form">
	        <fieldset>
	        <div class="row">
			   	<div class="col-sm-4">
	                <label for="date_from" class="col-md-2 control-label">Date</label>
	                <div class="input-group date form_date col-md-10" data-date="" data-date-format="dd MM yyyy" data-link-field="date_from" data-link-format="yyyy-mm-dd">
	                    <input class="form-control" size="16" type="text" value="" readonly>
	                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
	                </div>
					<input type="hidden" id="date_from" value="" />
				</div>
	            <div class="col-sm-4">
	           		<button type="submit" class="btn btn-primary">Search</button>
	           	</div>
	        </div>
	        </fieldset>
	    </form>
	</div>
	<br/>
   
	<div class="container">
		<!-- Example row of columns -->
      	<div class="row">
	        <div class="col-sm-4">
          		<div class="list-group">
		            <a class="list-group-item active">
		              Top 20
		            </a>
            		<a href="detail.html" class="list-group-item" target="_blank">
            			<span class="label label-danger">01</span> Halloween
            		</a>
		            <a class="list-group-item">
		            	<span class="label label-danger">02</span> Band
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-danger">03</span> Brothers
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">04</span> Reading
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">05</span> NYM
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">06</span> Album
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">07</span> #MadeInTheAM
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">08</span> https://t.co/sdf8d4jeb1
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">09</span> https://t.co/uagg4ntqnf
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-warning">10</span> #TOPdebate
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">11</span> http://t.co/sub825nqqi
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">12</span> Sheffield
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">13</span> Siiiiiiiiiiiiiiick
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">14</span> Bling
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">15</span> Hotline
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">16</span> Costume
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">17</span> @jamielawsonuk
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">18</span> https://t.co/pzqnc9wram
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">19</span> French
		            </a>
		            <a class="list-group-item">
		            	<span class="label label-info">20</span> 322-1113
		            </a>
		            
          		</div>
        	</div><!-- /.col-sm-4 -->
	        <div class="col-sm-8">
          		<div class="col">
          			<div class="row-sm-4">
          				<div class="panel panel-info">
				            <div class="panel-heading">
				              <h3 class="panel-title">Total Tweets</h3>
				            </div>
				      	</div>
				        <canvas id="piechart"></canvas>
				        <div id="piechart-legend" style="padding-top:10px;"></div>
				    </div>
				    <div style="height:80px;">&nbsp;</div>
				    <div class="row-sm-4">
          				<div class="panel panel-info">
				            <div class="panel-heading">
				              <h3 class="panel-title">Hot Topic Frequence</h3>
				            </div>
				      	</div>
				        <canvas id="barchart"></canvas>
				        <div id="barchart-legend"></div>
				    </div>
          		</div>
        	</div><!-- /.col-sm-8 -->
		</div>
		
	</div><!-- /container -->
	
	
	<footer class="footer">
      <div class="container">
        <p class="text-muted" align="center">
            &copy; Project For CMSC5733 Social Computing 2015 @CUHK
        </p>
      </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>

	<!-- Datetime ======================================================================================= -->
    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/jquery-1.8.3.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $('.form_date').datetimepicker({
		//language:  'fr',
		weekStart: 1,
		todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0
	    });
    </script>
    
    <!-- Charts ======================================================================================= -->
    <script src="../Chart.js.1.2/Chart.js"></script>
    <!-- Pie Chart -->
    <script type="text/javascript">
    var pieData = [
		{
			value: 13756,
			color:"#F7464A",
			highlight: "#FF5A5E",
			label: "Original"
		},
		{
			value: 8325,
			color: "#46BFBD",
			highlight: "#5AD3D1",
			label: "Retweet"
		}

	];

    <!-- Bar Chart -->
    
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

	var barChartData = {
		labels : ["Halloween","Band","Brothers","Reading","NYM","Album","#MadeInTheAM",
		          "https://t.co/sdf8d4jeb1","https://t.co/uagg4ntqnf","#TOPdebate",
		          "http://t.co/sub825nqqi","Sheffield","Siiiiiiiiiiiiiiick","Bling",
		          "Hotline","Costume","@jamielawsonuk","https://t.co/pzqnc9wram",
		          "French","322-1113"],
		datasets : [
			{
				label : "Frequence",
				fillColor : "rgba(51,122,183,0.5)",
				strokeColor : "rgba(51,122,183,0.8)",
				highlightFill : "rgba(51,122,183,0.75)",
				highlightStroke : "rgba(51,122,183,1)",
				data : [2469197, 1720370, 1688710, 1677462, 706511, 447513, 400211,
				        400130, 315011, 306828,
				        228572, 222928, 222927, 217393,
				        217392, 214598, 211776, 211776,
				        200849, 184214]
			}
			
		]

	}
	window.onload = function(){
		var ctx1 = document.getElementById("piechart").getContext("2d");
		window.myPie = new Chart(ctx1).Pie(pieData, {
			legendTemplate : "<ul style=\"list-style-type: none;\"><% for (var i=0; i<segments.length; i++){%><li style=\"display: inline;margin-right:8px;\"><span style=\"height:3px;width:3px;background-color:<%=segments[i].fillColor%>\">&nbsp;&nbsp&nbsp;&nbsp&nbsp;</span>&nbsp;<%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
		});
		var piechart_legend = window.myPie.generateLegend();
	  	$('#piechart-legend').append(piechart_legend);
	  	
		var ctx = document.getElementById("barchart").getContext("2d");
		window.myBar = new Chart(ctx).Bar(barChartData, {
			responsive : true,
			legendTemplate : "<ul style=\"list-style-type: none;\"><% for (var i=0; i<datasets.length; i++){%><li style=\"display: inline;margin-right:8px;\"><span style=\"height:3px;width:3px;background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp&nbsp;&nbsp&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
		});
		var barchart_legend = window.myBar.generateLegend();
	  	$('#barchart-legend').append(barchart_legend);
	}       
    </script>
    
  </body>
</html>
